<template>
	<view class="shop-cart">
		<view class="shop-list">
			<view v-for="(item,index) in cart.items" :key="index">
				<liu-swipe-action :index="index" @clickItem="deleteProduct($event,item)">
					<view class="shop-item">
						<label class="radio" @tap="singleCheck(item.skuId)">
							<radio style="transform: scale(0.7)" value="" :checked="item.checked" color="#FF3333">
							</radio>
						</label>
						<image class="goods-img" :src="item.image" mode=""></image>
						<view class="goods-detail">
							<view class="goods-name">
								{{ item.spuTitle }}
							</view>
							<view class="goods-attr">
								<view class="attrs" v-for="(data,idx) in item.skuAttr" :key="idx">
									<text>{{ data + ';' }}</text>
								</view>
								<view class="change">
									<text>选择</text>
									<span class="iconfont icon-xiajiantou"></span>
								</view>
							</view>
							<view class="goods-buy">
								<view><text class="price-prefix">¥</text>{{ item.price }}</view>
								<uni-number-box @change="numChangeHandle($event,item)" :min="1"
									v-model="item.count"></uni-number-box>
							</view>
						</view>
					</view>
				</liu-swipe-action>
			</view>
		</view>

		<view class="cart-footer">
			<label class="radio foot-radio" @tap="checkAllFun">
				<radio color="#FF3333" style="transform: scale(0.7)" :checked="checkedAll">全选</radio>
			</label>
			<view class="foot-total">
				<view class="foot-price">合计:
					<text class="font-active-color amount">
						<text>¥</text>
						<text>{{ cart.totalAmount }}</text> </text>
				</view>
				<view class="foot-num" @tap="confirmOrder">结算({{ cart.countType }})</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				isEdit: true,
				cart: [],
				checkedAll: false,
			}
		},
		computed: {
			...mapState({
				goodsList: state => state.cart.goodsList
			}),
			...mapGetters(['totalCount'])
		},
		onShow() {
			this.cartList()
		},
		methods: {
			// ...mapActions(['checkAllFun']),
			// ...mapMutations(['singleCheck']),
			eidtHandle() {
				this.isEdit = !this.isEdit
			},
			checkAllFun() {
				$http.request({
					url: '/cart/cart/checkAllChange'
				}).then(res => {
					this.cartList()
				})
			},
			deleteProduct(e, product) {
				$http.request({
					url: `/cart/cart/delete/${product.skuId}`
				}).then(res => {
					uni.showToast({
						duration: 1000,
						title: '商品已删除',
						icon: 'none'
					})
					setTimeout(() => {
						this.cartList()
					},1000)
				})
			},
			numChangeHandle(e, item) {
				let increase = e - item.count
				$http.request({
					url: `/cart/cart/add?skuId=${item.skuId}&num=${increase}`,
					method: 'POST'
				}).then(res => {
					this.cartList()
				})
			},
			singleCheck(id) {
				let idx = this.cart.items.findIndex(item => item.skuId === id)
				if (idx != -1) {
					// let originCheck = this.cart.items[idx].checked
					this.cart.items[idx].checked = !this.cart.items[idx].checked
					$http.request({
						url: `/cart/cart/checkedChange?skuId=${id}`,
					}).then(res => {
						this.cartList()
					})
				}
			},
			cartList() {
				$http.request({
					url: '/cart/cart',
					method: 'get',
					loading: true
				}).then(res => {
					this.cart = res.data
					let notCheckedAll = this.cart.items.filter(item => !item.checked).length > 0
					this.checkedAll = !notCheckedAll
				})
			},
			confirmOrder() {
				uni.navigateTo({
					url: '/pages/order/confirm-order'
				})
			}
		}
	}
</script>

<style scoped>
	.shop-cart {
		background-color: #F7F7F7;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.amount {
		font-size: 32rpx;
	}

	.shop-list {
		padding-bottom: 200rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		width: 95%;
	}

	.shop-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.goods-img {
		width: 210rpx;
		height: 210rpx;
	}

	.goods-name {
		font-size: 26rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.price-prefix {
		font-size: 20rpx;
		font-weight: 800;
	}

	.goods-buy {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		font-weight: 800;
	}

	.goods-detail {
		width: 50%;
		height: 200rpx;
		padding: 0 20rpx;
	}

	.goods-attr {
		margin-top: 20rpx;
		background-color: #F1F1F1;
		display: inline-block;
		font-size: 22rpx;
		color: #6E6E6E;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 100%;
		padding: 3rpx 12rpx;
		box-sizing: border-box;
	}

	.attrs {
		display: inline-block;
	}

	.change {
		display: inline-block;
		margin-left: 15rpx;
	}

	.cart-footer {
		display: flex;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom, 0);
		width: 100%;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid white;
	}

	.foot-radio {
		padding-left: 20rpx;
	}

	.foot-total {
		display: flex;
	}

	.foot-price {
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.foot-num {
		background-color: #F64A4B;
		color: white;
		padding: 0 60rpx;
		line-height: 100rpx;
	}

	.amount {
		font-weight: 800;
	}
</style>